<template>
  <div class="settlement">
    <topBar></topBar>
    <el-row>
      <el-col :span="16" :offset="4">
        <el-row>
          <el-col :span="7">
            <el-card class="box-card address-item">
              <div style="display: flex;justify-content: space-between;align-items: center;">
                <h4>收货地址</h4>
                <el-button type="text" @click="dialogVisible = true">更换地址</el-button>
              </div>
              <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="40%">
                <div class="address-content">
                  <el-card class="box-card" style="margin-top: 10px" v-for="(item,index) in addressList" :key="index">
                    <div style="width: 100%" @click="selectAddress(item)">
                      <div class="address-defalut" v-if="item.isDefault">默认地址 <i class="el-icon-circle-check"></i></div>
                      <span><strong>姓名：</strong>{{item.name}}</span><br/>
                      <span><strong>电话：</strong>{{item.mobile}}</span><br/>
                      <span><strong>省份：</strong><el-cascader style="width: 260px;" size="mini" v-model="item.province"
                                                             :options="options"
                                                             disabled></el-cascader></span><br/>
                      <span><strong>地址：</strong>{{item.address}}</span><br/>
                    </div>
                  </el-card>
                </div>
                <!-- <span slot="footer" class="dialog-footer">
                     <el-button @click="closeDialog">取 消</el-button>
                     <el-button type="primary" @click="submitDialog">确 定</el-button>
                   </span>-->
              </el-dialog>
              <div style="margin-top: 20px">
                <div><strong>姓名：</strong>{{addressDate.name}}</div>
                <br>
                <div><strong>电话：</strong>{{addressDate.mobile}}</div>
                <br>
                <div><strong>省份：</strong>
                  <el-cascader style="width: 200px" size="mini" v-model="addressDate.province"
                               :options="options"
                               disabled></el-cascader>
                </div>
                <br>
                <div><strong>地址：</strong>{{addressDate.address}}</div>
                <br>
              </div>
            </el-card>
          </el-col>
          <el-col :span="17">
            <el-card class="box-card">
              <h4 style="margin-bottom: 20px">商品列表</h4>
              <div>
                <el-table
                  :data="tableData"
                  border
                  height="300"
                  stripe
                  style="width: 100%">
                  <el-table-column
                    type="index"
                    label="序号"
                    width="50">
                  </el-table-column>
                  <el-table-column label="图片" width="80">
                    <template slot-scope="scope">
                      <el-image
                        style="width: 50px; height: 50px"
                        :src="scope.row.commodity.imgUrl"
                        fit="scale-down"></el-image>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="commodity.cname"
                    label="商品名称"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="commodity.model"
                    label="型号">
                  </el-table-column>
                  <el-table-column label="数量" width="155">
                    <template slot-scope="scope">
                      <el-input-number v-model="scope.row.count" size="mini" :step="1" step-strictly
                                       :min="1" @change="updateCount()"></el-input-number>
                    </template>
                  </el-table-column>

                  <el-table-column label="单价">
                    <template slot-scope="scope">
                      ￥ {{scope.row.commodity.price}}
                    </template>
                  </el-table-column>
                  <el-table-column label="总计">
                    <template slot-scope="scope">
                      ￥ {{scope.row.total=scope.row.count * scope.row.commodity.price}}
                    </template>
                  </el-table-column>
                </el-table>
                <div>
                  <h4>订单留言</h4>
                  <el-input
                    type="textarea"
                    rows="3"
                    placeholder="请输入内容"
                    v-model="message">
                  </el-input>
                </div>
                <div class="cart-settle">
                  <div style="margin-bottom: 5px">
                    共计：￥ {{totalMoney}}
                  </div>
                  <el-button type="success" @click="payForSomethings">支付</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import cityCode from "~/assets/address/city_code.json";
  import topBar from '~/components/topBar.vue'
  import * as CartRequest from "../../assets/cart/cart";
  import * as AddressRequest from "../../assets/address/address";
  import * as OrderRequest from "../../assets/order/order";

  export default {
    components: {
      topBar
    },
    data() {
      return {
        dialogVisible: false,
        options: [],
        message: '',
        addressDate: {
          name: '',
          mobile: '',
          province: [],
          address: '',
          isDefault: false
        },
        addressList: [],
        tableData: [],
        totalMoney: 0,
        src: 'http://theme.opencartdemo.cn/smart-3200-free/catalog/view/theme/default/image/no_items.png'
      };
    },
    methods: {
      selectAddress(item) {
        this.addressDate = item
        this.dialogVisible = false
      },
      updateCount() {
        let total = 0;
        this.tableData.forEach((item) => {
          total += item.total
        })
        this.totalMoney = total;
      },
      async payForSomethings() {
        await OrderRequest.createOrder(this);
        this.$router.push('/historyOrder/historyOrder')
      }
    },
    async mounted() {
      this.options = cityCode
      await AddressRequest.getDefaultAddress(this)
      await CartRequest.getCartInfoDetail(this);
      await AddressRequest.getAllAddress(this)
    }
  };
</script>

<style lang="less">
  .settlement {
    margin-bottom: 30px;

    .address-item {
      height: 60vh;
      width: 98%;

      .el-input.is-disabled .el-input__inner {
        color: #000;
      }
    }

    .box-card {
      border-radius: 12px;

      .cart-settle {
        margin-bottom: 20px;
        margin-top: 10px;
        float: right;
        text-align: right;
      }
    }
  }
</style>
